<template>
  <div class="sort">
    <div class="sort__header">
      <div>直播</div>
      <span @click="toMore">更多</span>
    </div>
    <div class="sort__content">
      <div class="sort__box">
        <div class="box-Img">
          <img src="@/assets/images/login.png" alt="" />
        </div>
        <div class="box-wrap">
          <div class="wrap-head">
            <span class="tag">必修</span>
            2023人事资源管理如何激励你的员工
          </div>
          <div class="wrap-desc">
            <van-icon name="clock-o" /> 2022-03-23 18:30
          </div>
          <div class="warp-lay">
            <van-row>
              <van-col span="14">
                <div class="user">
                  <img class="awater" src="@/assets/images/login.png" alt="" />
                  陈飘零
                </div>
              </van-col>
              <van-col span="10" style="text-align: right">
                <van-button class="tagbtn" type="success">直播中</van-button>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
</script>
<style lang="scss" scoped>
.sort {
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    div {
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #171a1d;
    }
    span {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #676b6b;
    }
  }
  &__content {
    background-color: #fff;
    border-radius: 4px;
    padding: 13px 16px;
  }
  &__box:last-child{
    margin-bottom: 0;
  }
  &__box {
    display: flex;
    .box-Img {
      width: 120px;
      height: 90px;
      border-radius: 7px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 7px;
      }
    }
    .box-wrap {
      flex: 1;
      margin-left: 10px;
      .wrap-head {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #272b2d;
        line-height: 22px;
        text-align: left;
        font-style: normal;
        .tag {
          background: #d8f3e5;
          border-radius: 2px;
          display: inline-block;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #00ad6f;
          line-height: 17px;
          text-align: center;
          font-style: normal;
          padding: 1px 4px;
          margin-right: 9px;
        }
      }
      .wrap-desc {
        margin: 4px 0 5px 0;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #676b6b;
        line-height: 17px;
        text-align: left;
        font-style: normal;
      }
      .warp-lay {
        .user {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #272b2d;
          line-height: 25px;
          text-align: left;
          font-style: normal;
          .awater {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            margin-right: 8px;
            vertical-align: middle;
          }
        }
        .tagbtn {
          background: #0dc678;
          border-radius: 2px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 10px;
          color: #ffffff;
          line-height: 20px;
          text-align: center;
          font-style: normal;
          height: 20px;
        }
      }
    }
  }
}
</style>
